<template>
  <div class="member-info">
    <div class="general border-bottom" @click="handleShowButtons">
      <div class="top">
        <div class="member-account">
          <span>{{item.accountName}}</span>
          <span class="info" v-show='item.totalMembers !== 0'>
            {{item.role == '0' ? '队长' : item.totalMembers}}
          </span>
        </div>
        <div class="member-state">
          <span class="online" v-show="item.isLogin">
            在线
          </span>
          <span class="last-login" v-show="!item.isLogin">
            {{item.lastLogin | formater}}
          </span>
        </div>
      </div>
      <div class="bottom">
        <span class="balance">
          个人余额：<span :class="item.personalBalance > 0 ? 'red' : ''" class="balance-no">{{item.personalBalance}}</span>
        </span>
        <span class="balance">
          团队余额：<span :class="item.personalBalance > 0 ? 'red' : ''" class="balance-no">{{item.teamBalance}}</span>
        </span>
      </div>
    </div>
    <div class="detail border-bottom" v-show="showButtons">
      <div class="btn button-selected">
        团队详情
      </div>
      <div class="btn button-selected">
        队长详情
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: function() {
        return {
          accountName: 'qwer123',
          role: '0',
          totalMembers: 890,
          personalBalance: 7878,
          teamBalance: 787878,
          isLogin: true,
          lastLogin: new Date().getTime() - 3600 * 1000
        }
      }
    }
  },
  data() {
    return {
      showButtons: false
    }
  },
  methods: {
    handleShowButtons() {
      this.showButtons = !this.showButtons
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .member-info 
    box-sizing border-box 
    // padding 0 10px 
    .general 
      height 62px 
      display flex 
      flex-direction column 
      justify-content space-evenly 
      box-sizing border-box 
      padding 0 10px
      background $color-text-button
      .top 
        display flex 
        align-items center 
        .member-account 
          flex 1
          .info 
            display inline-block
            border 1px solid $color-theme-red 
            border-radius 3px 
            line-height 16px
            box-sizing border-box 
            padding 0 5px 
            text-align center 
            color $color-theme-red
            font-size 13px
            background-color rgba($color-theme-red, 0.102)
        .member-state 
          .last-login 
            color $color-sub-grey
      .bottom 
        display flex
        .balance  
          margin-right 10px
          .red
            color $color-theme-red 
    .detail 
      display flex 
      height 48px 
      align-items center 
      justify-content center
      background $input-background-color
      box-shadow  0px -1px 2px $color-sub-grey
      .btn 
        height 30px 
        line-height 30px
        width 86px 
        font-size 15px 
        text-align center
        margin-right 20px 
</style>
